<template>
	<view class="order-content">
		<scroll-view scroll-y="true" style="height: calc(100vh - 40rpx);width: 100%;">
			<view class="order-item" v-for="item in dataList" :key="item.id" @click="gotoDetail(item.id)">
				<view class="order-info">
					<view>订单编号：{{item.orderNum}}</view>
					<view>{{item.orderStatus}}</view>
				</view>
				<view class="order-goods">
					<view class="goods-image">
						<image :src="item.goodsImage" mode=""></image>
					</view>
					<view class="goods-info">
						<view>{{item.goodsName}}</view>
						<view><text>￥</text>{{item.goodsPrice}}</view>
					</view>
				</view>
				<view class="order-btn">
					<u-button shape="circle" size="mini" :hair-line="false" :custom-style="leftBtn">取消订单</u-button>
					<u-button shape="circle" size="mini" :custom-style="rightBtn" type="success">立即支付</u-button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					id: 1,
					orderNum: 'WD202210130001',
					orderStatus:'待付款',
					goodsImage:'../../static/index/course.png',
					goodsName:'学法减分技巧答案',
					goodsPrice:'39.90'
				},
				{
					id: 2,
					orderNum: 'WD202210130001',
					orderStatus:'待付款',
					goodsImage:'../../static/index/course.png',
					goodsName:'学法减分技巧答案',
					goodsPrice:'39.90'
				},
				{
					id: 3,
					orderNum: 'WD202210130001',
					orderStatus:'待付款',
					goodsImage:'../../static/index/course.png',
					goodsName:'学法减分技巧答案',
					goodsPrice:'39.90'
				}],
				leftBtn: {
					color: '#666666',
					border: '1rpx solid #E6E6E6',
					background: "#fff",
					marginRight: "20rpx"
				},
				rightBtn: {
					color: '#fff',
					background: "#2AC092"
				}
			}
		},
		methods:{
			gotoDetail(id){
				uni.navigateTo({
					url:'/pagesA/orderDetail/index?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;

		.order-info {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E6E6E6;

			>view:nth-child(1) {
				color: #333;
			}

			>view:nth-child(2) {
				color: #2AC092;
			}
		}

		.order-goods {
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			.goods-image {
				width: 240rpx;
				height: 160rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
				overflow: hidden;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.goods-info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 30rpx;

				>view:nth-child(2) {
					font-size: 36rpx;
					color: #FF6D6A;

					>text {
						font-size: 28rpx;
					}
				}
			}
		}

		.order-btn {
			display: flex;
			justify-content: flex-end;
			padding-top: 20rpx;
		}
	}
</style>